<template>
	<view class="page-content">


		<div class="pt-18 pb-18 pl-30 pr-30 bg-fff  bor-r8">
			<picker mode="selector" @change="change" :range="typeList" range-key="label">
				<view class=" resume-box lh-70 flex align-center pb-15 bor-b">
					<view class="form-label resume-title fontS28 color-3"> 申请原因 </view>
					<view class=" form-cnt">
						<div class="radio fontS28" :class="postForm.refundReason ? '' : 'color-75'">
							{{ postForm.refundReason || '请选择原因' }}
						</div>
					</view>
					<div class="ml-auto iconfont icon-youjiantou"></div>
				</view>
			</picker>
			<view class="event-item mt-20">
				<view class="event-title fontS28">退款总额</view>
				<view class="event-content ">
					<div class="fontS34 font-bold">￥{{ postForm.refundMoney }}</div>


				</view>
			</view>
		</div>
		<div class="pt-18 pb-18 pl-30 pr-30 bg-fff  bor-r8 mt-20">
			<div class="flex-center fontS28 lh-70">
				<div>申请说明</div>
				<div class="ml-auto color-6">您还可以输入{{ 170 - postForm.refundInstructions.length }}个字</div>
			</div>
			<div>
				<textarea class="lh-40 fontS24 textAreaRefund" name="" id="" v-model="postForm.refundInstructions"
					placeholder="必填，请您详细填写申请说明"></textarea>
			</div>
			<div class="uplodImg">
				<image src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/图片上传.png" mode="aspectFill" />
			</div>

		</div>
		<div class="pt-18 pb-18 pl-30 pr-30 bg-fff mt-20 bor-r8">
			<div class="lh-70 flex align-center resume-box">
				<div class="resume-title fontS28 color-3">联系电话</div>
				<div class="fontS28 color-0d0 resume-input">
					{{ userInfo.phonenumber }}
				</div>
			</div>
		</div>
		<div class="bottom flex">
			<div class="bottomBtnConfirm fontS26 ml-auto" @click="submit">提交</div>

		</div>
	</view>
</template>

<script>
import { refundApply } from '@/api/order'

export default {


	data() {
		return {
			price: '',
			orderNo: 0,
			isCanceling: false,
			postForm: {
				refundMoney: '',
				refundReason: '',
				userType: '',
				orderId: '',
				orderNo: '',
				refundImg: '',
				refundInstructions: '',
				refundPhone: ''
			},
			typeList: [
				{ label: '服务能力与态度不行' },
				{ label: '出现重大服务事故' },
				{ label: '价格太贵了' },
				{ label: '有更好的选择' },
				{ label: '服务满足不了业务需求' },
				{ label: '其他' },
			],



		}
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo
		},

	},
	async onLoad(query) {
		this.postForm.refundMoney = query.price;
		this.postForm.orderId = query.id
		this.postForm.orderNo = query.orderNo
		this.postForm.userType = this.userInfo.userType;
		this.postForm.refundPhone = this.userInfo.phonenumber
		this.postForm.refundImg = 'https://xingangtong.oss-cn-beijing.aliyuncs.com/common/图片上传.png'
	},
	mounted() {

	},

	methods: {
		change(e) {
			this.postForm.refundReason = this.typeList[e.detail.value].label
		},


		submit() {
			if (!this.postForm.refundReason) {
				uni.showToast({ title: '请先选择申请原因', icon: 'none' })
				return false;
			}
			if (!this.postForm.refundInstructions) {
				uni.showToast({ title: '请先输入申请说明', icon: 'none' })
				return false;
			}
			if (!this.postForm.refundImg) {
				uni.showToast({ title: '请上传退款图片', icon: 'none' })
				return false;
			}
			uni.showModal({
				title: '提示',
				content: '确定要申请吗?',
				success: async res => {
					if (res.confirm) {
						const { data } = await refundApply(this.postForm)
						uni.navigateBack({
							delta: 1
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
}
</script>


<style scoped lang="less">
@import url(order.less);

.page-content {
	padding-bottom: 50upx;

	.title {
		font-size: 36upx;
		font-weight: bold;
		padding: 50upx 30upx;
		padding-bottom: 30upx;
	}

	.price {
		font-size: 50upx;
		font-weight: bold;
		line-height: 100upx;

		&.red {
			color: #F54B64
		}

	}

	.price-detail,
	.cancel-info {
		margin-bottom: 10upx;
		font-size: 24upx;
		color: #9098A0;

	}

	.yellow {
		color: #FF9900
	}

	.subtitle {
		padding: 0 20rpx;
		line-height: 88upx;
	}

}


.btn {
	height: 100%;
	flex: 3;
	text-align: center;
	line-height: 108upx;
	background: #efefefe;

	&.back {


		background: #F5CE00;
		color: #191A1E;


	}

}
</style>
